<script setup>
import {ref, reactive} from "vue"
const isShow = ref(true);
const isHide = ref(false);

const data = reactive([{
    id:0,
    title:"张三"
},{
    id:1,
    title:"李四"
},{
    id:2,
    title:"王二"
},])

function onBeforeEnter(){
    console.log("onBeforeEnter")
}
function onEnter(){
    console.log("enter")
}
function onAfterEnter(){
    console.log("onAfterEnter")
}
let i=3;
function add(){
    i++;
    data.push({
        id:i,
        title:"admin"
    })
}
function remove(){
    const i = Math.round(Math.random()*(data.length-1))
    data.splice(i, 1)

}
</script>

<template>
    <div class="box">
        <button @click="isShow = !isShow">按钮</button>
        <Transition
            name="custom-classes"
            enter-active-class="animate__animated animate__tada"
            leave-active-class="animate__animated animate__bounceOutRight"
            @before-enter="onBeforeEnter"
            @enter="onEnter"
            @after-enter="onAfterEnter"
        >

            <span v-show="isShow">文字</span>
        </Transition>
        <button @click="add">添加</button>
        <button @click="remove">删除</button>
        <TransitionGroup tag="ul" name="fade">
            <li
                v-for="val in data"
                :key="val.id"
            >{{ val.title }}</li>
        </TransitionGroup>
        <div class="modeBox">
            <input type="button" @click="isHide = !isHide">
            <Transition name="fade">
                <span v-if="isHide">你好</span>
                <span v-else>hello</span>
            </Transition>
        </div>
    </div>
</template>

<style>

span{
    display:block
}

.modeBox span{position:absolute;}

.fade-enter-from{
    opacity:0;
    margin-left:-40px;
}
.fade-leave-to{
    opacity:0;
    margin-left:40px;
}
.fade-enter-active, .fade-leave-active{
    transition: all 1s;
}
/* .fade-enter-to, .fade-leave-from{
    opacity:1;
    margin-left:0
} */

</style>